<style>
	.resrect{
		height:64px;
		width:64px;
		border:2px solid gray;
		margin:8px;
		float:left;
		position:relative;
		overflow:hidden;
	}
	.resrect .key{
		background:#ccc;
		position:absolute;
		width:64px;
		left:0px;
		bottom:0px;
		font-size:12px;
		height:20px;
	}
	.resrect .global{
		background:green;
		position:absolute;
		width:16px;
		height:16px;
		right:0px;
		top:0px;
		color:white;
	}
	.resrect .global:after{
		content:"global";
	}
	.resrect .local{
		background:red;
		position:absolute;
		width:16px;
		height:16px;
		right:0px;
		top:0px;
		color:white;
	}
	.resrect .local:after{
		content:"local";
	}
	.resrect img{
		height:64px;
		width:64px;
	}
	.addbtn{
		border:2px dashed gray;
	}
	.selectedrect{
		background-color:lightgray;
		border:2px solid red;
	}
</style>
<div id="page" class="easyui-layout" fit="true">
	<div data-options="region:'center'">
		<div id="resourcepane" class="easyui-accordion" fit="true">
			<div id="res_image" title="Image">
				<div id='addimgbtn' class='resrect addbtn'></div>
			</div>
			<div id="res_audio" title="Audio">
				<div id='addsndbtn' class='resrect addbtn'></div>
			</div>
			<div id="res_other" title="Other">
				<div id='addotherbtn' class='resrect addbtn'></div>
			</div>
		</div>
	</div>
	<div data-options="region:'south'" style="overflow:hidden">
		<button id="okbtn">OK</button>
		<button id="cancelbtn">Cancel</button>
	</div>
	<div id="otherdd"></div>
	<div id="cm_res" class="easyui-menu">
		<div id="cm_remove_res">Remove</div>
		<div>
			<span>SetAs</span>
			<div>
			<div id="cm_set_local">LocalResource</div>
			<div id="cm_set_global">GlobalResource</div>
			</div>
		</div>
	</div>
</div>
<script>
 $(document).ready(function(){
	var editor=edt;
	if(editor.project.currentProject==null){
		$('#dd').dialog('close');
		return false;
	}
	var projectpath = editor.project.currentProject.path;
	function addObjectToPane(resID,pane,respath,which){
		var path=respath;
		if(respath==null)
			path=editor.project.currentProject.path+"/"+editor.res.get(resID)['path'];
		$('#res_'+pane).prepend("<div class='resrect'><img id='{0}' src='{1}'/><span class='key'>{0}</span><span class='{2}'></span></div>".format(resID,path,which));
	}
	var globalres=editor.res.globalres;
	for( resID in globalres){
		var type=globalres[resID].type;
		if(type=='image'||type=='spritesheet'||type=='atlas'){
			addObjectToPane(resID,'image',null,'global');
		}else if(type=='audio'){
			addObjectToPane(resID,'audio','/data/audio.png','global');
		}else{
			addObjectToPane(resID,'other',"/data/{0}.png".format(type),'global');
		}
	}
	var localres=editor.res.localres;
	for( resID in localres){
		var type=localres[resID].type;
		if(type=='image'||type=='spritesheet'||type=='atlas'){
			addObjectToPane(resID,'image',null,'local');
		}else if(type=='audio'){
			addObjectToPane(resID,'audio','/data/audio.png','local');
		}else{
			addObjectToPane(resID,'other',"/data/{0}.png".format(type),'local');
		}
	}
	if(editor.node.selected!=null){
		switch(editor.node.selected.type){
			case 'sprite':
			case 'tilesprite':
			case 'image':
			case 'animate':
				$('#resourcepane').accordion({selected:0});break;
			case 'audio':
				$('#resourcepane').accordion({selected:1});break;
			default:
				$('#resourcepane').accordion({selected:2});break;
		}
	}
	$('#resourcepane').delegate('.resrect',"mousedown",function(){
		var selected=$(".selectedrect");
		if(selected.length>0)
			selected.removeClass("selectedrect");
		$(this).addClass("selectedrect");
	});
	$('#addimgbtn').click(function(){
		editor.file.openFileDialog('',function(filename){
			var resID = filename.substr(0, filename.lastIndexOf('.')) || filename;
			var respath = "{0}/data/{1}".format(projectpath,filename);
			addObjectToPane(resID,'image',respath,'global');
			$('#'+resID).load(function(){
				var res={path:filename,height:this.naturalHeight,width:this.naturalWidth};
				editor.res.add(resID,'image',res);
			});
		});
	});
	$('#addsndbtn').click(function(){
		editor.file.openFileDialog('',function(filename){
			var resID = filename.substr(0, filename.lastIndexOf('.')) || filename;
			addObjectToPane(resID,'audio',"/data/audio.png".format(type),'global');
			editor.res.add(resID,'audio',filename);
		});
	});
	$("#cm_res").menu({onClick:function (item) {
		switch(item.id){
		case 'cm_remove_res':
			editor.res.remove($(".selectedrect img").attr('id'));
			$(".selectedrect").remove();break;
		case 'cm_set_global':
			editor.res.setAsGlobalRes($(".selectedrect img").attr('id'));
			if($(".selectedrect").children().eq(2).hasClass('local')){
				$(".selectedrect").children().eq(2).removeClass('local')
				$(".selectedrect").children().eq(2).addClass('global')
			}
			break;
		case 'cm_set_local':
			editor.res.setAsLocalRes($(".selectedrect img").attr('id'));
			if($(".selectedrect").children().eq(2).hasClass('global')){
				$(".selectedrect").children().eq(2).removeClass('global')
				$(".selectedrect").children().eq(2).addClass('local')
			}
			break;
		default:break;
		}
	}});
	$(".resrect").bind('contextmenu',function(e){
		e.preventDefault();
		$('#cm_res').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	});
	$('#addotherbtn').click(function(){
		var dlg=$('#otherdd').dialog({
			title: 'My Dialog',
			width: 360,
			height: 400,
			closed: false,
			cache: false,
			href: "/dialog/otherResource",
			modal: true,
			onClose: function(){
				var newres=editor.res.selected;
				var resID=newres.id;
				switch(newres.type){
				case 'spritesheet':
				case 'atlas':
					addObjectToPane(resID,'image',null,'global');
					break;
				default:
					addObjectToPane(resID,'other',"/data/{0}.png".format(newres.type),'global');
					break;
				}

			}
		});
	});
	$('#okbtn').click(function(){
		editor.res.selected=editor.res.get($(".selectedrect img").attr('id'));
		$('#dd').dialog('close');
	});
	$('#canclebtn').click(function(){
		$('#dd').dialog('close');
	});
  });
</script>